<template>
  <el-dialog 
    title='新增'
    :visible.sync="visible"
    @close='handleClose'
    @open='handleOpen'
    top='16vh'
    size='tiny'
    >
    <div class="form-wrap">
      <el-form ref='datasManageForm' :model='form' :rules="rules" label-position='left' label-width="100px">

        <el-form-item label='休假名称' prop='typeSelect'>

          <el-select v-show='!isCustom' v-model='form.typeSelect'  style='width:219px'>

            <el-option 
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />

          </el-select>

          <el-input v-show='isCustom' v-model='form.typeInput' style='width:219px' />

          <div>
            <el-checkbox 
            style="margin-left:5px"
            v-model='isCustom'>
            自定义假期名称
           </el-checkbox>
          </div>

        </el-form-item>

        <el-form-item label='录入节假日' prop='year'>

           <!-- <el-date-picker
            v-model="form.year"
            format="yyyy-MM-dd"
            @change='(val)=>{this.form.year = val}'
            placeholder="选择日期" /> -->

             <el-date-picker
              v-model="form.year"
              format="yyyy-MM-dd"
              @change ='(val)=>{this.form.year = val}'
              placeholder="选择日期时间">
             </el-date-picker>

        </el-form-item>


      </el-form>
    </div>

    <span slot="footer">
      <el-button type='primary' @click.stop="handleSure('datasManageForm')">确 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Message, Checkbox, DatePicker } from 'element-ui'
Vue.use(Checkbox)
Vue.use(DatePicker)
import Bus from './bus'
export default {

  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editProp: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {

    const rule_typeSelect = (rule, value, callback) => {
      if (!value && !this.form.typeInput) {
        return callback(new Error('请选择或填写休假名称'))
      }

      callback()
    }

    const rule_year = (rule, value, callback) => {

      if (!value) {
        return callback(new Error('请选择日期范围'))
      }

      callback()
    }


    return {
      visible: false,
      form: {
        typeSelect: '',
        typeInput: '',
        year: ''
      },
      isCustom: true,
      rules: {
        typeSelect: [
          {
            required: true, validator: rule_typeSelect, trigger: 'submit'
          }
        ],
        year: [
          {
            required: true, validator: rule_year, trigger: 'submit'
          }
        ]
      },
      typeList: [
        {
          value: '',
          label: '请选择'
        }, {
          value: '春节',
          label: '春节'
        }, {
          value: '国庆节',
          label: '国庆节'
        }, {
          value: '清明节',
          label: '清明节'
        }, {
          value: '端午节',
          label: '端午节'
        }, {
          value: '中秋节',
          label: '中秋节'
        }, {
          value: '元旦节',
          label: '元旦节'
        }, {
          value: '劳动节',
          label: '劳动节'
        }, {
          value: '周末',
          label: '周末'
        }],

    }
  },

  watch: {
    dialogVisible (newValue) {
      this.visible = newValue
    },
    isCustom (newValue) {
      newValue === true && (this.form.typeSelect = '')
      newValue === false && (this.form.typeInput = '')
    }
  },

  methods: {

    handleOpen () {

      this.isCustom = true

      this.form.typeSelect = ''
      this.form.typeInput = this.editProp.leaveName
      const date = this.editProp.vacationDate
      this.form.year =  date.toString().split(' ').length && date.toString().split(' ')[0]
     
    },

    handleClose () {

      this.$emit("update:dialogVisible", false)

    },

    handleSure (formName) {

      this.$refs[formName].validate((valid) => {
        if (valid) {

          const name = this.isCustom ? this.form.typeInput : this.form.typeSelect

          const params = {
            leaveName: name,
            ruleId: this.$route.query.id,
            vacationDate: this.form.year,
            createDate: this.editProp.createDate,
            createId: this.editProp.createId,
            createName: this.editProp.createName,
            id: this.editProp.id,
            isEnable: this.editProp.isEnable,
            ruleId: this.editProp.ruleId
          }
          this.Axios
            .Post('/wfConfVacationRoutine/updateVacationRecord', params)
            .then(res => {

              if (res.data.status == 1) {

                Message({
                  type: 'success',
                  message: res.data.message
                })

                Bus.$emit('refresh', Math.random())
              }

              this.handleClose()
            })


        } else {

          return false
        }
      })
    },

  },
}
</script>

<style lang='less'>
.form-wrap {
  padding: 10px 0 0 10px;
}
</style>


